<!-- Tickets page -->
<div class="page" id="tickets">
	<h2>Tickets</h2>
	<div class="side_menu">
		<ul>
			<li><div onclick="addTicket();" style="cursor: pointer;">Add Ticket</div></li>
		</ul>
		<br/>
		<ul id="tickets_project_list">
			<li>
				<div>Loading Projects....</div>
			</li>
		</ul>
	</div>
	<div class="content" id="tickets_list">
		<table class="tablesorter">
			<thead>
				<tr>
					<th width="10px;"><input type="checkbox" onclick="selectAllTickets(this.checked);"/></th>
					<th>Name</th>
					<th>Type</th>
					<th width="20px;">Hours Spent</th>
					<th width="20px;">Hours Estimated</th>
				</tr>
			</thead>
			<tbody>
			</tbody>
		</table>
		<div class="gridNav">
			<img class="button" title="Delete" src="images/delete.png" onclick="deleteTickets();"/>
			<img class="button" title="Add" src="images/add.png" onclick="addTicket();"/>
			<img class="button" title="Search" src="images/search.png" onclick="searchTickets();"/>
		</div>
	</div>
	<!--#include virtual="tickets_edit.html" -->
	<!--#include virtual="tickets_add.html" -->
	<br style="clear: both;"/>

	<script>
		function addTicket(){
			$("#tickets_add input[@name='id']").val("");
			$("#tickets_add input[@name='name']").val("");
			$("#tickets_add textarea[@name='description']").val("");
			$("#tickets_add input[@type='checkbox']").attr('checked', false);
			window.location = "#/tickets/add";
		}

		function editTicket(){
			window.location = "#/tickets/edit/" + $(this).parents("tr").attr("id");
		}

		function selectAllTickets(checked){
			if(checked){
				$("#tickets input[@type=checkbox]").attr('checked', 'checked');
			} else {
				$("#tickets input[@type=checkbox]").attr('checked', '');
			}
		}

		//Load tickets by a filter
		function loadTickets(filters){
			window.location = "#/tickets/list";
			$("#tickets div.content#tickets_list table tbody").append("<tr><td></td><td>Loading....</td><td>Loading...</td><td></td><td></td></tr>");
			boto_web.find("data/tickets", filters, function(data){
				$("#tickets div.content#tickets_list table tbody").empty();
				var evenodd = "even";
				for(var x=0; x < data.length; x++){
					ticket = data[x];

					var row = document.createElement("tr");
					row.ticket = ticket;
					row.id = ticket.id;
					row.className = "selectable " + ticket.status + " " + evenodd;
					if(evenodd == "even"){
						evenodd = "odd";
					} else {
						evenodd = "even";
					}

					var checkcell = document.createElement("td");
					var el_select_checkbox = document.createElement("input");
					el_select_checkbox.type = "checkbox";
					el_select_checkbox.name = "ticket";
					el_select_checkbox.value = ticket.id;
					checkcell.appendChild(el_select_checkbox);

					var namecell = document.createElement("td");
					namecell.appendChild(document.createTextNode(ticket.name));
					namecell.className = "button";
					$(namecell).click(editTicket);

					var typecell = document.createElement("td");
					typecell.appendChild(document.createTextNode(ticket.type));
					typecell.className = "button";

					var hourscell = document.createElement("td");
					hourscell.appendChild(document.createTextNode(ticket.hours));
					hourscell.className = "button";

					var estimatecell = document.createElement("td");
					estimatecell.appendChild(document.createTextNode(ticket.estimated_hours));
					estimatecell.className = "button";

					row.appendChild(checkcell);
					row.appendChild(namecell);
					row.appendChild(typecell);
					row.appendChild(hourscell);
					row.appendChild(estimatecell);
					$("#tickets div.content#tickets_list table tbody").append(row);
				}
				$("#tickets div.content#tickets_list table").trigger("update");
			});
		}

		// Set the projects list
		function tickets_set_projects(projects){
			$("#tickets_project_list").empty();
			// All Projects
			var project_li = document.createElement("li");
			var project_div = document.createElement("div");
			project_div.appendChild(document.createTextNode("All Projects"));
			project_li.appendChild(project_div);

			var sub_menu = document.createElement("ul");
			var my_tickets = document.createElement("li");
			my_tickets.appendChild(document.createTextNode("My Tickets"));
			$(my_tickets).click(function(){
				$("#tickets div.content#tickets_list table tbody").empty();
				var project = $(this).parents("li")[0].project;
				loadTickets({status: "open", project: project.id});
			});

			var open_tickets = document.createElement("li");
			open_tickets.appendChild(document.createTextNode("Open Tickets"));
			$(open_tickets).click(function(){
				$("#tickets div.content#tickets_list table tbody").empty();
				loadTickets({status: "open"});
			});

			var all_tickets = document.createElement("li");
			all_tickets.appendChild(document.createTextNode("All Tickets"));
			$(all_tickets).click(function(){
				$("#tickets div.content#tickets_list table tbody").empty();
				loadTickets({});
			});

			sub_menu.appendChild(my_tickets);
			sub_menu.appendChild(open_tickets);
			sub_menu.appendChild(all_tickets);
			project_li.appendChild(sub_menu);
			$("#tickets_project_list").append(project_li);
			$("select[@name='project']").empty();


			for(var x=0; x < projects.length; x++){
				var project = projects[x];

				var project_li = document.createElement("li");
				var project_div = document.createElement("div");
				var project_text = document.createTextNode(project.name);
				project_div.href = "#project/" + project.id;
				project_div.appendChild(project_text);
				project_li.appendChild(project_div);
				project_li.project = project;

				var sub_menu = document.createElement("ul");
				var my_tickets = document.createElement("li");
				my_tickets.appendChild(document.createTextNode("My Tickets"));
				$(my_tickets).click(function(){
					$("#tickets div.content#tickets_list table tbody").empty();
					var project = $(this).parents("li")[0].project;
					loadTickets({status: "open", project: project.id});
				});

				var open_tickets = document.createElement("li");
				open_tickets.appendChild(document.createTextNode("Open Tickets"));
				$(open_tickets).click(function(){
					$("#tickets div.content#tickets_list table tbody").empty();
					var project = $(this).parents("li")[0].project;
					loadTickets({status: "open", project: project.id});
				});

				var all_tickets = document.createElement("li");
				all_tickets.appendChild(document.createTextNode("All Tickets"));
				$(all_tickets).click(function(){
					$("#tickets div.content#tickets_list table tbody").empty();
					var project = $(this).parents("li")[0].project;
					loadTickets({project: project.id});
				});

				sub_menu.appendChild(my_tickets);
				sub_menu.appendChild(open_tickets);
				sub_menu.appendChild(all_tickets);
				project_li.appendChild(sub_menu);
				$("#tickets_project_list").append(project_li);

				// Also add it to any option that might be a project list
				var option = document.createElement("option");
				option.project = project;
				option.value = project.id;
				option.appendChild(document.createTextNode(project.name));
				$("select[@name='project']").append(option);
			}
			$("select[@name='project']").trigger("change");
		}

		function tickets_loader(){
			loadUsers();
			if(projects == null){
				loadProjects(tickets_set_projects);
			} else {
				tickets_set_projects(projects);
			}
		}

		// Delete selected tickets
		function deleteTickets(){
			if(confirm("Are you sure you want to delete these tickets?")){
				$("#tickets input[@type='checkbox'][@name='project']").each(function(){
					if(this.checked){
						boto_web.del("data/tickets/" + this.value);
						$(this).parents("tr").hide();
					}
				});
			}
		}
		$(".page#tickets").bind("load", tickets_loader);
	</script>
</div>
<!-- /Project Page -->
